<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/purchase.css">
    <link rel="stylesheet" href="icon/iconfont.css">
    <style>
        .home .home_left .row div button:nth-of-type(1) span {
            background: url(image/purchase/icon-slides.png) no-repeat;
        }

        .home .home_left .row div button:nth-of-type(2) span {
            background: url(image/purchase/icon-slides.png) -41px 0px no-repeat;
            width: 40px;
            height: 70px;
            display: block;
        }
        .home .home_left .row div ol li {
            width: 50px;
            height: 2px;
            border-radius: 50%;
            background-color: #ccc;
        }
        
    </style>
</head>

<body>
    <div class="header">
        <div class="container header_nav">
            <div class="row">
                <div class="col-sm-8">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">米米商城</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">MIUI</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">loT</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">云服务</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">天星教科</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">有品</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">小爱开放平台</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">企业团购</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">下载App</a>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <ul class="nav justify-content-end">
                        <li class="nav-item">
                            <a id="name" class="nav-link" href="register.html">登录</a>
                        </li>
                        <li class="nav-item">
                            <a id="xs" class="nav-link" href="logon.html" >注册</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">消息通知</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"><font class="iconfont">&#xe600;</font>&nbsp;&nbsp;&nbsp;购物车(0)</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="bar">
        <div class="container">
            <div class="row bar_top">
                <div class="col-sm-1">
                    <img src="image/index/logo-mi2.png" alt="">
                </div>
                <div class="col-sm-8 justify-content-center">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">全部商品分类</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Xiaomi手机</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Redmi红米</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">电视</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">笔记本</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">平板</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">家电</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">路由器</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">服务</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">社区</a>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <input type="search" placeholder="搜索">
                    <button><span class="iconfont">&#xe6dd;</span></button>
                </div>
            </div>
    </div>
    <div class="home container">
        <div class="home_left container" id="img">
            <div class="row" >
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
                    </ol>
                    <div class="carousel-inner" id="img1">
                        <div class="carousel-item active">
                            <img src="image/purchase/1.png" class="d-block w-100">
                        </div>
                        <div class="carousel-item">
                            <img src="image/purchase/02.png" class="d-block w-100">
                        </div>
                        <div class="carousel-item">
                            <img src="image/purchase/3.png" class="d-block w-100">
                        </div>
                        <div class="carousel-item">
                            <img src="image/purchase/4.png" class="d-block w-100">
                        </div>
                        <div class="carousel-item">
                            <img src="image/purchase/5.png" class="d-block w-100">
                        </div>
                        <div class="mask" id="mask"></div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
                        data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
                        data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    </button>
                </div>
                <div class="big" id="big">
                    <img src="image/purchase/1.png" alt="" style="width: 800px;height: 800px;">
                </div>
            </div>
        </div>
        <div class="home_right" id="btn">
            <h2>Redmi K50</h2>
            <a href="#">「晒单返3元购物红包;交行信用卡分期至高优惠100元;下单抽奖嬴好礼」</a>
            <span>天玑8100|67W快充|5500mAh大电池|2K超清直屏│像素加倍│清晰倍|VC液冷散热│OIS光学防抖│杜比视界│索尼A800万像素相机</span>
            <p>小米自营</p>
            <p id="qian1">2400元</p>
            <hr>
            <h2>选这版本</h2>
            <button class="active">8GB+128GB</button>
            <button>8GB+256GB</button>
            <button>12GB+256GB</button>
            <h2>选着颜色</h2>
            <button class="active">墨羽</button>
            <button>幻境</button>
            <button>幼芒</button>
            <button>银</button>
            <div>
                <span id="memory">Refmi k50 8GB+128GB 墨羽</span>
                <span id="qian2">2400</span>
                <h2 id="qian3">总计：2400元</h2>
            </div>
            <button id="btn1"><a href="shoppimg1.html">确认付款</a></button>
            <button ">喜欢</button>
        </div>
    </div>
    <div class="mainf">
        <div class="flooter">
            <div class="flooter_top">
                <ul>
                    <li><span class="iconfont">&#xe62e;</span>预约维修服务</li>
                    <li><span class="iconfont">&#xe61f;</span>7天无理由退货</li>
                    <li><span class="iconfont">&#xe606;</span>15天免费换货</li>
                    <li><span class="iconfont">&#xe603;</span>满69元包邮</li>
                    <li><span class="iconfont">&#xe675;</span>520余家售后网点</li>
                </ul>
            </div>
            <div class="flooter_bottom">
                <ul class="flooter_bottom_left">
                    <li>
                        <h2>帮助中心</h2>
                        <p>账户管理</p>
                        <p>购物指南</p>
                        <p>订单操作</p>
                    </li>
                    <li>
                        <h2>服务支持</h2>
                        <p>售后政策</p>
                        <p>自助服务</p>
                        <p>相关下载</p>
                    </li>
                    <li>
                        <h2>线下门店</h2>
                        <p>小米之家</p>
                        <p>服务网点</p>
                        <p>授权体验店专区</p>
                    </li>
                    <li>
                        <h2>关于小米</h2>
                        <p>了解小米</p>
                        <p>加入小米</p>
                        <p>投资者关系</p>
                        <p>企业社会责任</p>
                        <p>廉洁举报</p>
                    </li>
                    <li>
                        <h2>关注我们</h2>
                        <p>新浪微博</p>
                        <p>官方微信</p>
                        <p>联系我们</p>
                        <p>公益基金会</p>
                    </li>
                    <li>
                        <h2>特色服务</h2>
                        <p>F码通道</p>
                        <p>礼物码</p>
                        <p>防伪查询</p>
                    </li>
                </ul>
                <div class="flooter_bottom_right">
                    <h2>400-100-5678</h2>
                    <p>8:00-18:00 (仅收市话费)</p>
                    <a href="#">人工客服</a>
                    <p>关注小米 <span class="iconfont">&#xe601;
                    </span> <span class="iconfont">&#xe602;</span></p>
                </div>
            </div>
        </div>
    </div>



    <script src="js/jquery.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/purchase.js">
        
    </script>
</body>
</html>